<template>
	<section class="container validate">
		<div class="validate_con">
			<van-cell-group>
			  	<van-field v-model="userPhone" left-icon="shouji" type="number" center clearable placeholder="请输入手机号" />
			  	<van-field v-if="baseUtil.isNotBlank(phone)" v-model="newPhone" left-icon="shouji" type="number" center clearable placeholder="请输入新的手机号" />
			  	<van-field v-model="validateCode" left-icon="yanzhengma" center clearable  placeholder="请输入验证码">
	    			<van-button v-if="time == 60" slot="button" size="small" round  type="cyan" plain @click="getCode" :disabled="isGetCode" >获 取</van-button>
	    			<van-button v-else slot="button" size="small" round  type="gray" plain >重新发送{{time}}s</van-button>
	  			</van-field>
			</van-cell-group>
			<van-button round type="cyan" @click="onSubmit">确 认</van-button>
		</div>
	</section>
</template>
<script >
	import {Field, Cell, CellGroup, Button, Icon, Toast} from 'vant'
	import  valid from '../utils/validate'
	import {savePhone} from "../api/user";
	import {sendValidateCode} from "../api/common";

    export default {
	components: {
		[Field.name]: Field,
		[Cell.name]: Cell,
		[CellGroup.name]: CellGroup,
		[Button.name]: Button,
		[Icon.name]: Icon,
		[Toast.name]: Toast,
	},
	data() {
		return {
			userPhone:'',
            newPhone:'',
			validateCode:'',
			phone:'',
			time:60,
			isGetCode:true,
		}
	},
	watch:{
        userPhone:function (val) {
            this.isGetCode = true;
            if(this.baseUtil.isNotBlank(this.phone)){  //修改
                if(valid.isNotBlank(val) && valid.tel(val) && valid.isNotBlank(this.newPhone) && valid.tel(this.newPhone)){
                    this.isGetCode = false;
                }
			}else{   //绑定
                if(valid.isNotBlank(val) && valid.tel(val)){
					this.isGetCode = false;
                }
			}
        },
		newPhone:function (val) {
            if(this.baseUtil.isNotBlank(this.phone)) {
                if(valid.isNotBlank(val) && valid.tel(val) && valid.isNotBlank(this.userPhone) && valid.tel(this.userPhone)){
                    this.isGetCode = false;
                }else{
                    this.isGetCode = true;
				}
            }
        }

	},
	methods: {
		gotoHome(){
			this.$router.push({name: 'Home'})
		},
		timer(){
		    let _this = this;
		    let t = setInterval(function () {
                _this.time --;
				if(_this.time == 0){
				    clearInterval(t);
                    _this.time = 60;
				}
            },1000);
		},
        async getCode(){
		    let phone = this.userPhone;
		    if(this.baseUtil.isNotBlank(this.phone)){
                if(this.phone != this.userPhone){
                    Toast({message:"手机号输入有误!",duration:1200});
                    return false;
                }
                if(this.userPhone == this.newPhone){
                    Toast({message:"两次输入手机号一致!",duration:1200});
                    return false;
                }
                phone = this.newPhone;
			}
            this.timer();
			await sendValidateCode({phone:phone});
		},
        async onSubmit() {
            let phone = this.userPhone;
            if(!valid.isNotBlank(this.userPhone)){
                Toast({message:"请输入手机号!",duration:1200});
                return false;
            }
            if(!valid.tel(this.userPhone)){
                Toast({message:"请输入正确的手机号!",duration:1200});
                return false;
            }
            if(this.baseUtil.isNotBlank(this.phone)){
                if(!valid.isNotBlank(this.newPhone)){
                    Toast({message:"请输入新的手机号!",duration:1200});
                    return false;
                }
                if(!valid.tel(this.newPhone) ){
                    Toast({message:"请输入正确的新手机号!",duration:1200});
                    return false;
                }
                if(this.phone != this.userPhone){
                    Toast({message:"手机号输入有误!",duration:1200});
                    return false;
                }
                if(this.userPhone == this.newPhone){
                    Toast({message:"两次输入手机号一致!",duration:1200});
                    return false;
				}
                phone = this.newPhone;
            }
		    if(valid.isBlankStr(this.validateCode)){
                Toast({message:"请输入验证码!",duration:1200});
                return false;
			}
			let params = {
				phone:phone,
				code:this.validateCode,
			}
			let resp = await savePhone(params);
			if(this.qUtil.validResp(resp)){
			    Toast.success({message:'保存成功!',duration:1200});
			    this.$router.push({name:'UserIndex'});
			}else{
			    Toast({message:resp.msg,duration:1200});
			}
	    },
	},
	mounted(){
	    this.phone = this.$route.query.phone || '';
	},

}</script>
<style>
.validate{
	height: 100%;
	background: #fff;
	overflow: hidden;
}
.validate .validate_con{
	padding:20% 13%;
	text-align: center;
}
.validate .validate_con .van-cell-group{
}
.validate .validate_con .van-hairline--top-bottom::after{
	border: none;
}
.validate .validate_con .van-cell{
	padding-left: 0;
}
.validate .validate_con .van-cell .van-icon{
	font-size: 1.5rem;
	color: #2BB89A;
}
.validate .validate_con .van-cell::after {
    content: ' ';
    position: absolute;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0rem;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 0.0625rem solid #eee;
}
.validate .validate_con .van-button{
	width: 100%;
	margin:3rem 0 0 0;
}
.validate .validate_con .van-cell .van-button{
	width: 100%;
	font-size: 0.9rem !important;
	padding: 0 1rem;
	margin: 0;
}
</style>